<template>
    <div style="margin-bottom: 30px;display: flex;justify-content: center;align-items: center">
        <el-input
                @keyup.enter="searchClick"
                placeholder="通过书名或作者搜索..."
                prefix-icon="el-icon-search"
                size="small"
                style="width: 400px;margin-right: 10px"
                v-model="keywords">
        </el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
    </div>
</template>

<script>
    import {getCurrentInstance, reactive, toRefs} from "vue";

    export default {
        name: 'SearchBar',
        setup() {
            const data = reactive({
                keywords: '',
                books: [],
                cardLoading: []
            })
            let {proxy} = getCurrentInstance()

            function searchClick() {
                proxy.$emit('onSearch')
            }

            return {
                ...toRefs(data),
                searchClick
            }
        }


    }
</script>

<style scoped>

</style>
